<template>
    <el-table :data="tableData" v-loading="tableLoading" border>
        <el-table-column :width="item.width" v-for="(item,index) in columns" :align="item.align ? item.align : 'center'" :label="item.label"
            :prop="item.prop">
            <template v-slot="{row}">
                <slot :name="item.prop" :row="row">
                    {{getProp(row,item)}}
                </slot>
            </template>
        </el-table-column>       
    </el-table>

</template>
<script setup>
//处理传递的属性名是xxx[0].xxx
let getProp = (row, item) => {
    // console.log(item.prop)
    let reg = /^(.+)\[(\d+)\]\.?(.*)$/
    let matched = item.prop.match(reg)
    if (matched) {
        let arr = row[matched[1]]
        let prop = arr[matched[2]]
        let prop2 = prop[matched[3]]
        return prop2
    }
    return row[item.prop]
}
//column
// [
//     {
//         label:"",
//         prop:"",
//         width:""
//     }
// ]
//定义表格的属性
let props = defineProps({
    "tableData": {
        type: Array
    },
    "columns": {
        type: Array
    },
    "tableLoading": {
        type: Boolean,
        default() {
            return false
        }
    },
    align: "center",
    actionLabel:{//自定义表格内容的描述
        type:String,
        default(){
            return '操作'
        }
    }
})
</script>
<script>
export default {
    meta: {
        title: 'vipCharge',
        name: 'vip充值',
        routeName: 'charge',
        icon: 'icon-chongzhi'
    }
}
//使用方法
//给表格传递的属性
//1.tableData 表格对应的数据
//2.columns 每一列的属性描述，动态表头等等
//columns 传递类型      属性
//         数组[]       label:'表头'，prop:'数据对应的字段'，'width','align'
//插槽：
//通过指定具名插槽具名（同columns中的prop），可以自定义表格的内容
</script>